<template>
  <div>
    <div class="info_tab_boxssss">
      <tab
        v-if="tabArr.length>0"
        :line-width="2"
        :custom-bar-width="classification_id === 0 ? '30px' : '' "
      >
        <tab-item
          :selected="index === active"
          v-for="(item,index) in tabArr"
          :key="index"
          @on-item-click="tabIndex"
        >{{item.title}}</tab-item>
      </tab>
      <div class="zhezhaoaaa"></div>
    </div>
    <div
      class="slide"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
      ref="slide"
    >
      <div
        class="slide-group"
        ref="slideGroup"
        :style="`width:${tabArr.length * 100}%`"
      >
        <div
          class="item"
          v-for="(item,index) in tabArr"
          :key="index"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <section
            v-if="active === index"
            class="setion"
            ref="wrapper"
          >
            <div>
              <div>
                <div v-if="JSON.stringify(firstListData) !== '{}'">
                  <first-list
                    :firstListData="firstListData"
                    v-on:listcallback="listClick"
                  ></first-list>
                </div>
                <div class="list_box_item">
                  <list
                    class="list-b"
                    v-for="(item,index) in listarr"
                    :key="index"
                    :item="item"
                    :status="true"
                    v-on:listcallback="listClick"
                  ></list>
                </div>
                <load-more
                  :show-loading="loadStatus"
                  :tip="loadStatusText"
                  v-if="listarr.length>3"
                ></load-more>
              </div>
              <div
                v-if="JSON.stringify(firstListData) === '{}'"
                style="margin-top:30%"
              >
                <no-assessment text="此分类暂无课程"></no-assessment>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div
      class="scroll-marsk"
      v-if="scrollmarsk"
    ></div>
    <div
      class="loading"
      v-if="loading"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
    >
      <div style="height:100%;width:100%">
      </div>
    </div>
    <bottomtab v-if="!$route.query.jump_id"></bottomtab>
    <div
      class="postion"
      v-if="as"
    ></div>
  </div>
</template>

<script>
import noAssessment from '@/components/public/noassessment'
import firstList from '@/components/public/firstlist'
import BScroll from 'better-scroll'
import bottomtab from '@/components/public/tab'
import list from '@/components/public/list'
import {
  info,
  datalist
} from '@/api/information'
import {
  Tab,
  TabItem,
  LoadMore
} from 'vux'
import { clearInterval } from 'timers'
export default {
  components: {
    noAssessment,
    TabItem,
    Tab,
    bottomtab,
    firstList,
    list,
    LoadMore
  },
  data () {
    return {
      classification_id: '',
      osos: 0,
      as: false,
      scrollmarsk: false,
      loading: false,
      loadStatus: false,
      loadStatusText: ' 我是有底线的 ',
      listarr: [],
      firstListData: {},
      page: 1,
      WinWidth: '',
      WinHeight: '',
      tabArr: [],
      active: 0,
      index: 0
    }
  },
  created () {
    this.getTopTab()
  },
  mounted () {

  },
  watch: {

    // if (s.scrollLeft >= 10) {
    //   s.scrollLeft = 0
    //   clearInterval(this.interval)
    // }
    '$route' (to, from) {
      this.$router.go(0)
    },
    osos (v) {
      this.loading = true
      this.page = 1
      this.listarr = []
      this.active = this.slide.getCurrentPage().pageX
      this.getlist(this.tabArr[this.active].classification_id)
    }
  },
  methods: {
    tabIndex (index) {
      if (this.index !== index) {
        this.index = index
        this.firstListData = {}
        this.listarr = []
        this.slide.goToPage(index)
      }
    },
    getlist (id) {
      let prams = {
        jump_ids: this.$route.query.jump_id ? this.$route.query.jump_id : '',
        page: this.page,
        pageshow: 10,
        classification_id: id,
        type: this.$route.query.jump_id ? 1 : 2
      }
      datalist(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        this.loading = false
        this.status = true
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          if (this.page === 1) {
            this.firstListData = data[0] // 第一条数据
            data.splice(0, 1)
            this.listarr = data
            console.log(this.listarr)
            this.initWrapper()
          } else {
            this.listarr = [...this.listarr, ...data]
            var uniques = []
            var stringify = {}
            for (var i = 0; i < this.listarr.length; i++) {
              var keys = Object.keys(this.listarr[i])
              keys.sort(function (a, b) {
                return (Number(a) - Number(b))
              })
              var str = ''
              for (var j = 0; j < keys.length; j++) {
                str += JSON.stringify(keys[j])
                str += JSON.stringify(this.listarr[i][keys[j]])
                // console.log(str)
              }
              if (!stringify.hasOwnProperty(str)) {
                uniques.push(this.listarr[i])
                stringify[str] = true
              }
            }
            this.listarr = uniques
          }
          this.page = this.page + 1
        } else {
          if (this.page === 1) {
            this.firstListData = {}
            this.listarr = []
          } else {
            this.loadStatus = false
            this.loadStatusText = '我是有底线的'
          }
        }
      })
    },
    getTopTab () {
      let prams = {
        classification_id: this.$route.query.jump_id ? this.$route.query.jump_id : 0,
        type: this.$route.query.jump_id ? 2 : 1
      }
      this.classification_id = prams.classification_id
      info(prams).then(res => {
        if (res.data.code === 200) {
          this.tabArr = res.data.data.classification
          if (this.$route.query.jump_id) {
            this.tabArr.forEach((el, index) => {
              if (el.classification_id == this.$route.query.jump_id) {
                this.active = index
              }
            })
            this.getlist(this.tabArr[0].classification_id)
            this.$nextTick(() => {
              setTimeout(() => {
                this.tabIndex(this.active)
              }, 10)
            })
          } else {
            this.getlist(this.tabArr[0].classification_id)
          }
          this.$nextTick(() => {
            setTimeout(() => {
              var s = document.querySelector('.scrollable')
              let cwidth = document.documentElement.clientWidth
              let terval1s = setInterval(() => {
                s.scrollLeft += 2
                // console.log(s.scrollWidth)
                // console.log()
                // console.log(s.scrollLeft)
                if (s.scrollWidth - document.documentElement.clientWidth === s.scrollLeft) {
                  s.scrollLeft = 0
                  window.clearInterval(terval1s)
                }
              }, 30)
            }, 200)
          })
          this.initTab()
        }
      })
    },
    initWrapper () {
      this.$nextTick(() => {
        let _this = this
        this.scroll = new BScroll(this.$refs.wrapper[0], {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          bounce: false,
          probeType: 3,
          pullUpLoad: {
            threshold: 10
          }
        })
        this.scroll.on('pullingUp', function () {
          _this.as = false
          _this.loadStatus = true
          console.log(_this.status)
          if (_this.status) {
            _this.getlist(_this.tabArr[_this.active].classification_id) // 传一不更值
            _this.loadStatusText = '加载中'
            _this.status = false
          }
          _this.scroll.finishPullUp()
          _this.scroll.refresh()
        })
      })
      // 上拉加载
    },
    initTab () {
      this.$nextTick(() => {
        if (this.$route.query && this.$route.query.jump_id) {
          this.WinHeight = document.documentElement.clientHeight - 44
        } else {
          this.WinHeight = document.documentElement.clientHeight - 97
        }
        this.WinWidth = document.documentElement.clientWidth
        let _this = this
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          momentum: false,
          pullUpLoad: {
            threshold: 0
          },
          snap: {
            loop: false,
            threshold: 0,
            speed: 300
          },
          bounce: false,
          stopPropagation: true,
          click: this.click
        })
        this.slide.on('scroll', function (ob) {
          if (_this.osos !== ob.x) {
            _this.scroll.destroy()
          }
        })
        this.slide.on('scrollEnd', function (ob) {
          _this.osos = ob.x
        })
      })
    },
    // 列表点击传出
    listClick (item) {
      // 判断机型
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: item.curriculum_id,
            title: item.title
          }
        })
      } else {
        window.location.href =
          `/coursedetails?curriculumId=${item.curriculum_id}&title=${item.title}`
      }
    }
  }
}
</script>

<style scoped>
.vux-tab .vux-tab-item.vux-tab-selected {
  font-size: 16px;
}
.vux-tab .vux-tab-item {
  font-size: 14px;
}
.scrollable .vux-tab-item {
  flex: 0 0 20%;
}
.postion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.scroll-marsk {
  z-index: 100000000000;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.info_tab_boxssss {
  width: 100%;
  top: 0;
  left: 0;
  height: 44px;
  overflow: hidden;
  position: relative;
}
.fix {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.setion {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.slide {
  width: 100%;
  overflow: hidden;
}
.slide-group {
  display: flex;
}
.item {
  position: relative;
  overflow: hidden;
}
.list_box_item {
  width: 90%;
  margin: 5px 5% 0 5%;
}
.loading {
  position: fixed;
  background-color: #fff;
  z-index: 1000;
  top: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading > div {
  color: #333;
  font-size: 24px;
  background-image: url("https://o6wndwjxn.qnssl.com/fang.gif");
  background-size: 70px;
  background-position: center center;
  background-repeat: no-repeat;
}
.zhezhaoaaa{
  width: 4px;
  height: 44px;
  position: absolute;
  background: linear-gradient(left,rgba(255,255,255,0.9),rgba(255,255,255,1));
  right: 0;
  top: 0;
}
</style>
<style>
.vux-loadmore.weui-loadmore_line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 0;
  width: 60%;
}
</style>
